<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="1350px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose" :footershow="false">
			<div class="admin">
				<div class="bor">
					<el-form ref="formRef" :model="formData" label-width="145px" label-position="right">
						<el-row>
							<el-col :span="span">
								<el-form-item label="物料编码">
									<fontGoBeyond :text="formData.no" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="名称">
									<fontGoBeyond :text="formData.title" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="分类">
									<p>{{ formData.cate_names}}</p>
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="报废仓库">
									<fontGoBeyond :text="formData.warehouse_name" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="报废数量">
									<fontGoBeyond v-if="formData.category_id==15"
										:text="formData.quantity+formData.unit_name_15" />
									<fontGoBeyond v-else :text="formData.quantity+formData.unit_name" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="规格">
									<fontGoBeyond :text="formData.spec" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="型号">
									<fontGoBeyond :text="formData.model" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="属性一">
									<fontGoBeyond :text="formData.alias" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="属性二">
									<fontGoBeyond :text="formData.other" />
								</el-form-item>
							</el-col>
							<el-col :span="span">
								<el-form-item label="从属设备">
									<!-- <el-button @click="onHovertitles(formData)" v-if="formData.slave_name" size="small">
										{{formData.slave_name}}
									</el-button> -->
                                    <el-tooltip :content="formData.slave_name"  placement="top">
                                        <butstyle @onHovertitles="onHovertitles" :row="formData"></butstyle>
                                    </el-tooltip>
                                    <!-- <template #="{row}">
                                     <butstyle 
                                     @onHovertitles="onHovertitles"
                                      :row="formData"></butstyle>
                                    </template> -->
                                    <!-- <butstyle @onHovertitles="onHovertitles" :row="formData"></butstyle> -->

								</el-form-item>
                               
							</el-col>
							<el-col :span="span">
								<el-form-item label="设备配件">
									<el-button v-if="formData.category_id==4&&formData.accessories?.length!=0"
										@click="onSee(formData)" size="small">
										查看
									</el-button>
									<span v-else style="font-size:13px">无</span>
								</el-form-item>
							</el-col>
							<el-col :span="span"></el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<collapse :name="'展开更多'" :names="'收起更多'" :showMain="showMains"
									@handleChangeCollapse="handleChangeCollapses">
									<template #mains>
										<el-row>
											<el-col :span="span">
												<el-form-item label="生产厂家">
													<fontGoBeyond :text="formData.manufacturer" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="出厂日期">
													<fontGoBeyond :text="formData.date_production" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="特种设备注册代码编号">
													<fontGoBeyond :text="formData.registration_code" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="登记牌证号">
													<fontGoBeyond :text="formData.registration_no" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="特种设备制造许可证">
													<fontGoBeyond :text="formData.license_key" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="检验起始日期">
													<fontGoBeyond :text="formData.inspection_start_date" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="检验周期">
													<p>{{formData.inspection_cycle_name}}</p>
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="登记牌证时间">
													<fontGoBeyond :text="formData.registration_date" />
												</el-form-item>
											</el-col>
											<el-col :span="span">
												<el-form-item label="产品合格证编号">
													<fontGoBeyond :text="formData.product_no" />
												</el-form-item>
											</el-col>
											<el-col :span="18">
												<el-form-item label="准用年限">
													<fontGoBeyond :text="formData.service_life" />
												</el-form-item>
											</el-col>
										</el-row>
									</template>
								</collapse>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="图片">
									<div>
										<div>
											<material-picker :photoHide="true" disabled
												v-model="formData.certificate_image" :limit="99" />
										</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="附件">
									<div>
										<div>
											<material-picker :photoHide="true" :img="false" disabled
												v-model="formData.product_image" :limit="99" />
										</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="备注">
									<fontGoBeyond :text="formData.remark" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="bottom-bor"></div>
				<div v-if="list?.length!=0" style="width: 100%;">
					<div>报废详情</div>
					<el-row>
						<el-col :span="span" v-for="(row,index) in list" :key="index">
							<div class="borcard" v-if="pager.extend.product.category_id==15">
								{{row.unit_length}}{{formData.unit_name_15}}/{{formData.unit_name}}
								<span style="margin-left: 10px;">
									{{row.quantity}}{{formData.unit_name}}
								</span>
								<span style="margin-left: 10px;">
									{{(row.quantity*10)*(row.unit_length*10)/100}}{{formData.unit_name_15}}
								</span>
							</div>
							<div class="borcard" v-else>
								{{row.quantity}}{{formData.unit_name}}
							</div>
						</el-col>
					</el-row>
				</div>
				<div v-if="list?.length!=0" class="bottom-bor"></div>
				<div class="bors">
					<collapse :name="'展开搜索'" :names="'收起搜索'" :showMain="showMain"
						@handleChangeCollapse="handleChangeCollapse">
						<template #mains>
							<div style="height: 20px;"></div>
							<el-card class="!border-none" shadow="never">
								<el-form class="mb-[-16px]" :model="formData" inline :label-width="70">
									<el-form-item label="单据编号">
										<el-input v-model="formDatas.order_no" @keyup.enter="resetPage"  class="w-40" size="small" clearable placeholder="请输入单据信息"/>
									</el-form-item>
									<el-form-item label="创单人">
										<el-select class="w-40" v-model="formDatas.user_id" @keyup.enter="resetPage"  placeholder="" size="small"
											clearable>
											<el-option v-for="(item, index) in options.authall" :key="index"
												:label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="审核人">
										<el-select class="w-40" v-model="formDatas.review_user_id" @keyup.enter="resetPage"  placeholder="" size="small"
											clearable>
											<el-option v-for="(item, index) in options.getListing" :key="index"
												:label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="责任人">
										<el-select class="w-40" v-model="formDatas.person_responsible" @keyup.enter="resetPage"  placeholder="" size="small"
											clearable>
											<el-option v-for="(item, index) in options.getListing" :key="index"
												:label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="resetPage" size="small">查询</el-button>
										<el-button @click="resetParams" size="small">重置</el-button>
									</el-form-item>
								</el-form>
							</el-card>
							<div style="height: 20px;"></div>
						</template>
					</collapse>
				</div>
				<el-card v-loading="pager.loading" class="!border-none" shadow="never">
					<div>
						<waterTable @onsuccess="getOptions" :data="pager.lists" :typeTable="typeTable"
							:list="options.tableTile"></waterTable>
					</div>
				</el-card>
			</div>
		</popup>
	</div>
	<tableHover v-if="Hovertitles" ref="HovertitleRefs" :showImage="true" @success="getLists" @close="Hovertitles = false" />
	<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
</template>
<script lang="ts" setup>
	import tableHover from '@/components/table-hovers/index.vue'
	import Popup from '@/components/popup/index.vue'
	import EditPopup from '@/components/accessories.vue'
	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	import {
		getList
	} from '@/api/delete/list'
	import {
		adminListss
	} from '@/api/water/list'
	import {
		adminauthall
	} from '@/api/inventory/list'
	import {
		usePaging
	} from '@/hooks/usePaging-water'
	import {
		getCommonFieldDisplay
	} from '@/api/tools/code'
	import {
		adminlistColumn
	} from '@/api/warehouse/list'
	import waterTable from './water-table.vue'
	const typeTable = ref('scrap_detail_view')
	const emit = defineEmits(['success', 'close'])
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const HovertitleRefs = shallowRef<InstanceType<typeof EditPopups>>()
	const mode = ref('add')
	const showMain = ref(false)
	const showEdit = ref(false)
	const handleChangeCollapse = () => {
		showMain.value = !showMain.value
	}
	const showMains = ref(false)
	const handleChangeCollapses = () => {
		showMains.value = !showMains.value
	}
	const popupTitle = computed(() => {
		if (mode.value == 'edit') {
			return '报废历史'
		} else {
			return '报废历史'
		}

	})
	const span = ref(6)
	const Hovertitles = ref(false)
	const options = reactive({
		authall: [] as any[],
		listColumn: [] as any[],
		tableTile: [] as any[],
		getListing: [] as any[],
		jobsing: [{
			id: 10,
			name: '入库'
		},
		{
			id: 20,
			name: '出库'
		}
		],
		jobs: [{
			id: 10,
			name: '入库单'
		},
		{
			id: 20,
			name: '调拨单'
		},
		{
			id: 30,
			name: '报废单'
		}
		]
	})
	const onSee = async (val : any) => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('add')
		editRef.value?.setFormData(val)
	}

	const formDatas = reactive({
		id: '',
		type: '',
		order_no: '',
		business_type: '',
		user_id: '',
		review_user_id:'',
		person_responsible:''
	})
	// 表单数据
	const formData = reactive({
		unit_name_15: '',
		category_id: '',
		inspection_cycle_name: '',
		id: '',
		type: '',
		no: '',
		title: '',
		unit_name: '',
		quantity_num: '',
		cate_names: '',
		quantity: '',
		warehouse_name: '',
		warehouse_id:'',
		spec: '',
        slave_colour: '',
		model: '',
		alias: '',
		other: '',
		slave: '',
		slave_name: '',
		manufacturer: '',
		date_production: '',
		product_no: '',
		registration_no: '',
		registration_date: '',
		license_key: '',
		registration_code: '',
		inspection_cycle: '',
		inspection_start_date: '',
		service_life: '',
		outbound_warehouse_id: '',
		certificate_image: [],
		product_image: [],
		remark: '',
		accessories: []
	})
	const onHovertitles = async (data : any) => {
		Hovertitles.value = true
		await nextTick()
		HovertitleRefs.value?.open('edit')
		HovertitleRefs.value?.setFormData(data)
	}

	const {
		pager,
		getLists,
		resetParams,
		resetPage
	} = usePaging({
		fetchFun: adminListss,
		params: formDatas
	})
	const list = ref([])
	watch(() => pager.extend, (newValue) => {
		let product = newValue.product
		list.value = newValue.list
		if (product) {
            //高扬修改 改色
            product.slave_colour== 3 ? 4 : product.slave_colour;
            // formData.slave_colour = product.slave_colour;
			formData.accessories = product.accessories
			formData.category_id = product.category_id
			formData.inspection_cycle_name = product.inspection_cycle_name
			formData.manufacturer = product.manufacturer
			formData.license_key = product.license_key
			formData.product_no = product.product_no
			formData.registration_code = product.registration_code
			formData.date_production = product.date_production
			formData.service_life = product.service_life
			formData.registration_no = product.registration_no
			formData.registration_date = product.registration_date
			formData.inspection_start_date = product.inspection_start_date
			formData.inspection_cycle = product.inspection_cycle
			formData.slave = product.slave
			formData.remark = product.remark
			formData.certificate_image = product.certificate_image
			formData.product_image = product.product_image
			formData.quantity_num = product.quantity_num
			if (formData.category_id == 4) {
				showMains.value = true
			} else {
				showMains.value = false
			}
		}
	}, {
		deep: true
	})

	const getOptions = () => {
		adminauthall({
			page_type: 0
		}).then((data : any) => {
			options.authall = data
		})
		adminlistColumn({
			page_type: 0
		}).then((data : any) => {
			options.listColumn = data
		})
		getCommonFieldDisplay({
			type: typeTable.value
		}).then((data : any) => {
			options.tableTile = data
		})
		
	}
	const ongetList=(id)=>{
		getList({
			warehouse_id: id
		}).then((data : any) => {
			
			options.getListing = data
		})
	}

	const handleSubmit = async () => {
		popupRef.value?.close()
		emit('success')
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}
	onMounted(() => {
		getOptions()
	})

	const setFormData = (data : Record<any, any>) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}

			if(formData.warehouse_id){
				ongetList(formData.warehouse_id)
			}
		
		for (const key in formDatas) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formDatas[key] = data[key]
				if (data.type) {
					data.type = ''
				}
			}
		}
		getLists()
	}

	const handleClose = () => {
		emit('close')
	}
	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	$bor-color: #eeeff0;
	.el-col{
		overflow: hidden;
	}

	.boring {
		border-bottom: 1px solid #EEEFF0;
		border-right: 1px solid #EEEFF0;
	}
	.boring:nth-child(4n) {
		border-right: none;
	}.boring:last-child {
		border-bottom: none;
	}

	.bors {
		border-top: 1px solid $bor-color;
		border-left: 1px solid $bor-color;
		border-right: 1px solid $bor-color;
		padding: 0 10px;
	}

	.bottom-bor {
		height: 15px;
	}

	.bor {
		border-left: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;

		.el-col {
			border-right: 1px solid $bor-color;
			border-top: 1px solid $bor-color;
			align-items: center;
			padding: 0px 0;
		}

		.el-form-item {
			margin-bottom: 0;
		}

		::v-deep .el-form-item__label {
			border-left: 0;
			border-top: 0;
			border-bottom: 0;
			margin-right: 10px;
		}

		::v-deep .el-form-item__error {
			z-index: 10;
		}

		.bor-title {
			width: 100%;
			height: 40px;
			padding: 10px;
			background-color: #F8F8F8;
		}
	}

	::v-deep .el-collapse-item__header {
		justify-content: center;
	}

	::v-deep .el-collapse-item__arrow {
		margin-left: 10px;
	}

	::v-deep .el-card__body {
		padding: 0;
	}

	::v-deep .el-collapse-item__header {
		height: 16px;
		border: none;
	}

	::v-deep .el-collapse-item__wrap {
		border: none;
	}

	.borcard {
		border: 1px solid $bor-color;
		padding: 6px;

	}
</style>